<template>
  <div>
    <div>
      <div class="pb-5">
        <el-table :data="tableData" :row-style="{ height: '36px', padding: 0 }"
          :header-cell-style="{ background: '#EDF3FF' }" style="width: 100%" v-loading="loading">
          <el-table-column :width="50" label="序号">
            <template slot-scope="scope">
              <div>{{ scope.$index + 1 }}</div>
            </template>
          </el-table-column>
          <!-- 动态生成表头 -->
          <el-table-column v-for="item in keyData" :key="item.key + item.slotName" :prop="item.key" :label="item.name">
            <!-- slot="header" slot-scope="scope" -->
            <template slot-scope="scope">
              <div v-if="item.key === 'slot'">
                <slot :name='item.slotName' :row="scope.row"></slot>
              </div>
              <div v-else>{{ scope.row[item.key] }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" id="buttonStyle" fixed="right" label="操作" :min-width="140">
            <template slot-scope="scope">
              <slot name="center" :row="jsonCopy(scope.row)"></slot>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 翻页 -->
      <div class=" pagination ta-r">
        <div>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pagination.page" :page-sizes="[10, 100, 200, 300, 400]" :page-size="pagination.limit"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    keyData: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: false,
    },
    // pagination:{
    //   type: Object,
    //   default: () => ({}),
    // },
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      pagination: {
        limit: 10,
        page: 1,
      },
    }
  },
  methods: {
    jsonCopy(obj) {
      return JSON.parse(JSON.stringify(obj));
    },
    // 翻页
    handleSizeChange(e) {
      this.$emit('handleSizeChange', e);
    },
    // 修改条数
    handleCurrentChange(e) {
      this.$emit('handleCurrentChange', e);
    },
  },
};
</script>
<style scoped></style>
